<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>以太猫</title>
    <link rel="icon" href="./img/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
    <link rel="stylesheet" href="./css/commont.css">
    <link rel="stylesheet" href="./css/home.css">
</head>

<body>
    <div class="home">
        <!-- 下载APP -->
        <div class="toast-app">
            <div class="windows">
                <img src="./img/app.png" alt="" class="time">
                <img src="./img/confirm.png" alt="" class="confirm">
            </div>
        </div>
        <!-- 关注公众号 -->
        <div class="toast-accounts">
            <div class="windows">
                <p>微信扫码关注公众号</p>
                <img src="./img/code@2x.png" alt="" style="margin:10px 0;">
                <p style="font-size:12px;color: #686868;">或微信搜索公众号"yitaimao"关注</p>
                <p style="color:#FF6D17;margin:10px 0; font-size:20px; cursor:pointer" class="confirm">知道了</p>
            </div>
        </div>
        <!-- 点击回到顶部 -->
         <div class="top">
             <img src="./img/top@2x.png" alt="">
             <span>置顶</span>
         </div>
        <!-- 头部信息 -->
        <header class="header">
            <div class="header-center">

                <div class="header-title">中国第一款区块链游戏</div>
                <div class="header-logo">
                    <img src="./img/logo.png" alt="" width="44">
                    <span style="font-size:18px;">以太猫</span>
                </div>
                <div class="down">
                    <span class="down-app">下载APP</span>
                </div>
                <div class="downloader">
                    <span class="down-accounts">关注公众号</span>|
                    <a target="_blank" href="./book.html">查看白皮书</a>
                </div>
            </div>
            <div class="header-buttom clearfix">
                <img src="./img/drop@2x.png" alt="" width="50">


            </div>
            <p>滑动鼠标查看</p>
        </header>
        <!-- 导航 -->
        <nav class="clearfix  nav">
            <div class="contain layout">
                <div class="left">
                    <img src="./img/logo.png" alt="">
                </div>
                <div class="center">
                    <span>以太猫</span>
                    <br>
                    <span style="font-size: 14px; color: #686868;">您的第一只永恒的宠物</span>
                </div>
                <ul class="right clearfix" id="nav">
                    <li class="active">
                        <span class="dot clearfix"></span>
                        <a id="a11" href="#a1">以太猫介绍</a>
                    </li>
                    <li>
                        <span class="dot clearfix"></span>
                        <a id="a22" href="#a2">核心成员</a>
                    </li>
                    <li>
                        <span class="dot clearfix"></span>
                        <a id="a33" href="#a3">白皮书</a>
                    </li>
                    <li>
                        <span class="dot clearfix"></span>
                        <a id="a44" href="#a4">发展规划</a>
                    </li>
                    <li style="margin-right:0;">
                        <span class="dot clearfix "></span>
                        <a id="a55" href="#a5">联系我们</a>
                    </li>
                </ul>
            </div>

        </nav>
        <!-- 游戏特色 -->
        <div class="feature  clearfix" id="a1">
            <div class="title">
                <span> 游戏特色</span>
            </div>
            <ul class=" feature-card clearfix layout ">
                <li>
                    <img src="./img/only@2x.png" alt="">
                    <p>独一无二</p>
                    <div class="border clearfix "></div>
                    <div class="describe">游戏中的以太猫将有几十亿种外貌特征，每只猫咪都像你一样独特</div>
                </li>
                <li>
                    <img src="./img/all@2x.png" alt="">
                    <p>永久存在</p>
                    <div class="border clearfix "></div>
                    <div class="describe">基于以太经典区块链技术，每只猫咪都是100%无法篡改、毁坏、复制</div>
                </li>
                <li style=" margin-right:0;">
                    <img src="./img/more@2x.png" alt="">
                    <p>玩法多样</p>
                    <div class="border clearfix "></div>
                    <div class="describe">以太猫均可以进行交易、配育、赠送，后期陆续开放猫咪PK、养成等多种互动玩法</div>
                </li>
            </ul>

        </div>
        <!-- 交易赠送 -->
        <div class="exchange  clearfix" id="exchange">
            <div class="title">
                <span>交易 &nbsp;赠送</span>
            </div>
            <ul class=" exchange-card clearfix layout ">
                <li class="clearfix">
                    <img src="./img/exchange@2x.png" alt="">
                    <div class="detail">
                        <p style="font-size: 20px;color: #323232;font-weight:500;">交易</p>
                        <div style="color: #686868;margin-top:12px;font-size:14px;">您可以在交易集市挂售自己的宠物赚取猫币，任何人都可以买。并且您可以设置猫咪的起拍价格、结束价格和拍卖持续时长。</div>
                    </div>
                </li>
                <li style="margin-bottom:0;position:relative;bottom:0;" class="clearfix">
                    <img src="./img/give@2x.png" alt="">
                    <div class="detail">
                        <p style="font-size: 20px;color: #323232;font-weight:500;">赠送</p>
                        <div style="color: #686868;margin-top:12px;font-size:14px;">
                            您也可以将心爱的猫咪赠送给心爱的Ta，让永恒的猫咪代表你们之间永恒的感情。
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 培育小猫 -->
        <div class="cultivate  clearfix" id="cultivate">
            <div class="title">
                <span> 配育小猫</span>
            </div>
            <div class=" cultivate-card clearfix layout ">
                <ul class="clearfix">
                    <li>
                        <img src="./img/cultivate1@2x.png" alt="">
                        <p>你的猫将生下一只小猫咪</p>
                    </li>
                    <li>
                        <img src="./img/cultivate2@2x.png" alt="">
                    </li>
                    <li>
                        <img src="./img/cultivate3@2x.png" alt="">

                        <p>双方将获得约定的配育费</p>
                    </li>
                    <li>
                        <img src="./img/cultivate4@2x.png" alt="">
                    </li>
                    <li>
                        <img src="./img/cultivate5@2x.png" alt="">

                        <p>宝宝将遗传父母基因 也可能会解锁新特性哦~</p>
                    </li>
                </ul>

                <div class="cultivate-bottom">
                    <span>*交易，赠送，配育小猫需要使用猫币，猫币可以通过邀请好友下载注册以太猫APP来获得。</span>
                </div>
            </div>


        </div>
        <!-- 更多玩法，敬请期待 -->
        <div class="play  clearfix" id="play ">
            <div class="title">
                <span>  更多玩法 敬请期待</span>
              
            </div>
            <div class="play-card layout clearfix">

                <ul class="clearfix ">
                    <li>
                        <img src="./img/play1.png" alt="">
                        <p>互萌互助</p>
                    </li>
                    <li>
                        <img src="./img/play2.png" alt="">
                        <p>道具商城</p>
                    </li>
                    <li>
                        <img src="./img/play3.png" alt="">
                        <p>喂食猫咪</p>
                    </li>
                    <li>
                        <img src="./img/play4.png" alt="">
                        <p>猫咪旅行</p>
                    </li>
                    <li>
                        <img src="./img/play5.png" alt="">
                        <p>敬请期待...</p>
                    </li>

                </ul>
            </div>

        </div>
        <!-- 核心成员 -->
        <div class="core  clearfix" id="a2">
            <div class="title-back">
                <span> 团队核心成员介绍</span>
            </div>
            <div class="swiper-container layout">
                <div class="swiper-wrapper ">
                    <div class="swiper-slide">
                        <img src="./img/core1@2x.png" alt="">
                        <p class="core-name">
                            <span style="font-size:20px;">赵永鹏</span>
                            <span style="font-family: PingFangSC-Light;font-size:14px;">CEO</span>
                        </p>
                        <div class="core-describe">
                            <p>以太猫创始人兼CEO，北京大学统计学硕士，10年以上决策科学实践经验，熟悉各种经济模型，有超过200人以上团队管理经验；</p>
                            <p>曾任挖财网信贷风控负责人，阿里金融创始团队成员之一，主持创建阿里金融第一代风控模型；曾供职HSBC汇丰风险分析中心、GE Capital全球决策科学实验室；</p>
                            <p>专注于金融+互联网业务的量化分析以及数据驱动的决策流程， 从2015年开始研究数字货币和区块链， 对区块链经济模型设计有深度研究和实践。</p>
                        </div>
                    </div>
                    <div class="swiper-slide">

                        <img src="./img/core2@2x.png" alt="">
                        <p class="core-name">
                            <span style="font-size:20px;">卞阳</span>
                            <span style="font-family: PingFangSC-Light;font-size:14px;">首席区块链专家</span>
                        </p>
                        <div class="core-describe">
                            <p>上海交通大学计算机科学与工程系本科和硕士，十多项专利的发明人，软件著作权申请人，分布式监管科技DRC社区技术专家，DRC区块链技术评测标准的主要编制人，参与了多个主流区块链项目的共识机制、智能合约以及经济机制研究，数链联盟发起人。</p>
                            <p>曾开发中国第一个支持语音识别的浏览器，是国内第一批人工智能商业化实践者，Minicoin微支付论文第一作者。</p>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <img src="./img/core3@2x.png" alt="">
                        <p class="core-name">
                            <span style="font-size:20px;">孔明</span>
                            <span style="font-family: PingFangSC-Light;font-size:14px;">CEO</span>
                        </p>
                        <div class="core-describe">
                            <p>从事IT行业20年，在多家上市公司担任过CTO/技术总监，200人技术团队管理经验。</p>
                            <p> 多年互联网/移动互联网平台研发经验，擅长金融系统建设和大数据平台搭建。担任过多家知名上市企业技术顾问（上海强生、上海永达，中国龙工等）。</p>

                        </div>


                    </div>
                    <div class="swiper-slide">

                        <img src="./img/core4@2x.png" alt="">
                        <p class="core-name">
                            <span style="font-size:20px;">Ryan Liu</span>
                            <span style="font-family: PingFangSC-Light;font-size:14px;">首席游戏设计官</span>
                        </p>
                        <div class="core-describe">
                            <p>15年以上产品设计经验，各类游戏资深玩家，负责过针对重度玩家的产品整合。</p>
                            <p> 曾就职返利网、大众点评、圆刚科技、ASUS、HTC等多家公司，获得过IF大奖。担任过UXPA工作坊讲师，UXD大赛评审。</p>

                        </div>


                    </div>
                    <div class="swiper-slide">

                        <img src="./img/core5@2x.png" alt="">
                        <p class="core-name">
                            <span style="font-size:20px;">张帅</span>
                            <span style="font-family: PingFangSC-Light;font-size:14px;">首席产品专家</span>
                        </p>
                        <div class="core-describe">
                            <p>上海交通大学信息安全本科，远角网&以太猫创始人。</p>
                            <p> 曾就职于盛大游戏、微软、喜马拉雅、360金融等多家互联网企业。</p>
                            <p>参与并设计喜马拉雅APP、360借条等产品，多次完整的从0到千万月活的产品设计运营经验。</p>
                        </div>


                    </div>
                </div>
                <div class="pre" >

                </div>
                <div class="nex"></div>
            </div>

        </div>
        <!-- 下载白皮书 -->
        <div class="book" id="a3">
            <div class="title-back">
                <span> 下载白皮书</span>
            </div>
            <div class="down">
                <a target="_blank" href="./book.html" style="color:#fff;cursor:pointer;">白皮书</a>
            </div>

        </div>
        <!-- 发展规划 -->
        <div class="plan" id="a4">
            <div class="title-back">
                <span> 发展规划</span>
            </div>
            <div class="plan-text  clearfix">
                <img src="./img/progress@2x.png" alt="">
            </div>
        </div>
        <!-- 联系我们 -->
        <div class="contact clearfix" id="a5">
            <div class="title-back">
                <span>联系我们</span>
            </div>
            <div class="contact-card layout clearfix">
                <div class="code clearfix ">
                    <img src="./img/code@2x.png" alt="">
                    <p style="margin-top:20px;">扫描微信二维码</p>
                    <p> 关注更多资讯 </p>
                </div>
                <div class="company clearfix">
                    <p style="margin:20px 0;">上海琰璟网络科技有限公司</p>
                    <p>
                        <img src="./img/shape@2x.png" alt="" width="15">
                        <span>400-825-5858</span>
                    </p>
                </div>
            </div>
            <!-- 游戏忠告-->
            <div class="suggest">
                <div class="suggest-text layout">
                    <div class="suggest-left clearfix">
                        <p style="color:#fff;font-size:12px;">健康游戏忠告：抵制不良游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</p>
                        <p style="color:#fff; font-size:12px;">
                            适龄提示：
                            <span style="color: red;">本公司游戏适合18岁以上玩家</span>
                            <a href="./monitor.html" target="_blank" style="color: green;cursor:pointer;">家长监控</a>
                        </p>
                    </div>

                    <img src="./img/bitmap@2x.png" alt="">
                </div>

            </div>
        </div>


    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            // 复制slide
            // loop: true,
            // slide滑动时只滑动一格
            // 页面加载自动滑动
            // autoplay:true,

            freeMode: true,
            // 滑块之间的距离
            spaceBetween: 20,
            // 每页显示的数量
            slidesPerView: "3",
            // slidesPerView:auto,
            //  可用鼠标滑动
            mousewheelControl: true,
            // 第一时间获取swiper对象
            notNextTick: true,
            //  手势
            grabCursor: true,
            simulateTouch:true,
            // 效果图
            // effect: 'coverflow',
            // // 阴影效果
            // shadows:false,
            // // 效果配置
            // coverflowEffect: {
            //     rotate: 10, //侧转角度（正值凹陷）
            //     stretch: 10, //每个slide之间拉伸值（正值紧贴） 
            //     depth: -100, //值越大为远景（可负值）
            //     modifier: 1,
            //     //   shadows: true
            //     // slideShadows:false
            // }
            // 更改前进后退按钮
            navigation: {
                prevEl: '.pre',
                nextEl: '.nex',
            }
           
        })
    </script>
    <script type="text/javascript">
    
        // 下载APP弹框
        $(".down-app").click(function () {
            $(".toast-app").show();
        });
        $(".confirm").click(function () {
            $(".toast-app").hide();
        });
        // 关注公众号弹框
        $(".down-accounts").click(function () {
            $(".toast-accounts").show();
        });
        $(".confirm").click(function () {
            $(".toast-accounts").hide();
        });

        //  锚点过渡效果
        $('#a22,#a33,#a44').click(function () {

            $('html, body').animate({
                // 解决懋典链接头部被导航栏遮挡的情况-60（导航栏的高度）
                scrollTop: $($.attr(this, 'href')).offset().top - 60
                // scrollTop:scroll
            }, 1500);
            return false;
        });
        // 解决第一个锚点导致页面下拉的情况
        $('#a11').click(function () {
            var height= $(window).height();
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
                // scrollTop:Number(height)+10
            }, 1000);
            return false;
        });

         // 解决最后一个锚点导致页面下拉的情况
        $('#a55').click(function () {
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top-60
            }, 1000);
            return false;
        });

        // 点击首屏下拉
        $(".header-buttom").click(function () {
            var height = $(window).height();
            console.log('height:',height);
            $("body,html").animate({
                scrollTop: (height+2) + "px"
            }, 800); //页面滚动到指定高度 
        });
        //   点击回到顶部效果
        $(".top").click(function () { 
            $('html, body').animate({
                scrollTop: $(window).height()
            }, 1000);
            return false;
         });
        //  点击导航切换状态
        $(function () {
                    $('#nav li').click(function () {
                        $('#nav li').removeClass("active");
                        $(this).addClass("active");
                    });

                    //顶部吸附效果
                    var navH = $(".nav").offset().top;
                    $(window).scroll(function () {
                        
                        // 滚动到指定的位置回到顶部按钮显示；
                            var scroH = $(this).scrollTop();
                            var height = $(window).height();
                            // console.log('height:',height);
                            // console.log('scroH:',scroH);
                          if(scroH>height){
                              $(".top").show();
                          }else{
                            $(".top").hide();
                          }

                            if (scroH >= navH) {
                                $(".nav").css({
                                    "position": "fixed",
                                    "top": 0,
                                    "z-index": 99
                                });
                            }
                             else if (scroH < navH) {
                                $(".nav").css({
                                    "position": "relative"
                                });
                            }
                            //滚动切换导航栏效果
                            var wst = $(window).scrollTop(); //滚动条距离顶端值
                            // console.log("wst", wst);
                            for (i = 1; i < 6; i++) { //加循环
                                if ($("#a" + i).offset().top - 600 <= wst) { //判断滚动条位置
                                    $('#nav li').removeClass("active"); //清除active类
                                    $("#a" + i + i).parent("li").addClass("active"); //给当前导航加active类
                                }
                                }

                                // 滚动到指定位置加效果 
                                // var a2 = $("#a2").offset().top - ($(window).height() - 100);
                                // var a3 = $("#a3").offset().top - ($(window).height() - 100);

                                // if ($(this).scrollTop() > a2) {
                                //     $("#a2").addClass("fadeInLeft");
                                // }
                                // if ($(this).scrollTop() > a3) {
                                //     $("#a3").addClass("fadeInLeft");
                                // }

                            })


                    })
        
    </script>
    <script>
          window.onload = function () {
              
          }
    </script>

</body>

</html>